<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //一次性操作许多元素时可以使用,在文档碎片中虚拟渲染结果最后刷新页面,提高渲染速度
        //创建10,000个li
        window.onload = function () {
            let oUl = document.getElementById('ul1');
            let oDF = document.createDocumentFragment();    //创建文档碎片

            for (let i = 0; i < 10000; i++) {
                let oLi = document.createElement('li');

                //oUl.appendChild(oLi); //常规做法

                //使用文档碎片的做法,将li添加到文档碎片中
                oDF.appendChild(oLi)
            }

            //最后让节点添加文档碎片
            oUl.appendChild(oDF);
        }

        //低版本ie有效果,高版本没啥用


    </script>
</head>

<body>

<div>
    <ul id="ul1">

    </ul>

</div>

</body>
</html>